import $ from './library/jquery.js';
window.onload = function() {
    // let id = location.search.split('=')[1];
    let id = 10004;
    $.ajax({
        type: 'get',
        url: '../../interface/getItem.php',
        data: { id },
        dataType: 'json'
    }).then(res => {
        console.log(res);
        let picture = JSON.parse(res.picture);
        let type = JSON.parse(res.type)[0];
        let string = '';
        // 头，介绍
        $('.tb_detail_hd h1').text(res.tiltle);
        // 图片加载
        $('#page .smallph img').each((i, ele) => {
            ele.src = picture[i].src;
        })
        $('#page .bigph img').attr('src', picture[0].src.slice(0, -13) + '_430x430q90.jpg');
        $('.bd .content .photo').html(res.details);
        // 数量
        $('.tb_key span:eq(2) em').text(res.num);
        number(res.num);
        // 价格
        $('.tm_fcs_panel i').text(res.price);

        // 类型
        for (let key in type) {
            string += `
          <div>
            <span>${key}</span>
            <ul>
              <li class="checked">橘子味</li>
            </ul>
          </div>
          `;
        }
        $('.introduce .add').html(string);
        $('.introduce .add ul').each((i, ele) => {
            let li = '';
            type[$(ele).siblings().text()].forEach(el => {
                li += `<li>${el}</li>`
            })
            $(ele).html(li);
            $(ele).children('li:eq(0)').addClass('checked')
        });

    }).catch(xhr => {
        console.log(xhr.status);
    })
    scale();
    city();

    slider();
    xuan();
    topNav();
};
// 选择图片，放大镜
function scale() {

    let photo = $('#page .smallph img'),
        bigphoto = $('#page .bigph img'),
        bigph = $('#page .bigph'),
        span = $('#page .bigph span'),
        big = $('#page .big');
    // 选择图片
    photo.on('mouseover', function() {
        $(this).parent('li').siblings().css('border', '0');
        $(this).parent('li').siblings().children('img').css('margin', '1px');
        $(this).parent('li').css('border', '1px solid black');
        $(this).parent('li').children('img').css('margin', '0');
        let src = this.src.slice(0, -13) + '_430x430q90.jpg';
        bigphoto.attr('src', src)
    });
    // 放大图片
    bigph[0].addEventListener('mouseover', function() {
        bigph[0].addEventListener('mousemove', function(e) {
            let x = e.pageX - bigph[0].offsetLeft,
                y = e.pageY - bigph[0].offsetTop,
                spanWid = span.css('width').slice(0, -2) / 2,
                spanHei = span.css('height').slice(0, -2) / 2,
                maxHeight = bigphoto.css('height').slice(0, -2) - spanHei,
                maxWidth = bigphoto.css('width').slice(0, -2) - spanWid;
            // 获取图片路径
            let src = 'url(' + bigphoto.attr('src') + ')';
            //  span蓝色块移动
            span.css({ 'top': y - spanHei, 'left': x - spanWid });

            // span蓝色块移动条件
            if (x <= spanWid) {
                span.css({ 'left': 0 });
            } else if (x >= maxWidth) {
                span.css({ 'left': maxWidth - spanWid });
            }
            if (y <= spanHei) {
                span.css({ 'top': 0 });
            } else if (y >= maxHeight) {
                span.css({ 'top': maxHeight - spanHei });
            }
            span.css({ 'display': 'block' });
            let bigX = span.css('left').slice(0, -2),
                bigY = span.css('top').slice(0, -2);
            big.css({
                'display': 'block',
                'background-image': src,
                'background-size': '200% 200%',
                'background-position': '-' + bigX * 2 + 'px -' + bigY * 2 + 'px',
                'z-index': '999'
            });
        }, false)
        span[0].addEventListener('mouseout', function() {
            bigph[0].addEventListener('mousemove', null);
            span.css({ 'display': 'none' });
            big.css({ 'display': 'none' });
        }, false)
    }, false);
};
// 右侧轮播图
function slider() {

    let box = $('#page .content .box>ul'),
        li1 = $('#page .content .box>ul li:eq(0)'),
        li2 = $('#page .content .box>ul li:eq(1)'),
        li3 = $('#page .content .box>ul li:eq(2)'),
        liHeight = $(li1).css('height').slice(0, -2),
        index = 1,
        span = $('#page .content span');
    let top = 0;
    box.append(li1.clone());
    box.append(li2.clone());
    box.append(li3.clone());

    span.on("click", function() {
        if (span.index(this)) {
            next();
        } else {
            prev();
        }
    });

    const stop = function() {
        box.stop(true, true);
    };
    const prev = function() {
        stop();
        start(1);
    };

    const next = function() {
        stop();
        start();
    };
    const start = function(derection) {
        top = "-=" + liHeight * 3;
        if (derection) {
            top = "+=" + liHeight * 3;
            if (index == 1) {
                index = 13;
                box.css("top", -liHeight * (index - 1));
            }
        }
        box.animate({
                top,
            },
            500,
            function() {
                if (derection) {
                    index -= 3;
                    if (index == 1) {
                        index = 13;
                        box.css("top", -liHeight * (index - 1));
                    }
                } else {
                    index += 3;
                }
                if (index == 13) {
                    index = 1;
                    box.css("top", 0);
                }
            }
        );
    }.bind(this);
}
// 底部选项卡
function xuan() {

    $('.col_main ul li:lt(3)').on('click', function() {
        let index = $(".col_main ul li:lt(3)").index(this);
        console.log(index);
        $(this).addClass("checked").siblings().removeClass("checked");
        $(".col_main .content>div")
            .eq(index)
            .addClass("display")
            .siblings()
            .removeClass("display");
    })
}
// 顶部固定导航
function topNav() {

    $(window).on('scroll', function() {
        if ($(document).scrollTop() >=
            $('#page .bd').offset().top) {
            $('.col_main>.ulBox').css({
                'position': 'fixed',
                'width': '100%',
                'z-index': 999,
                'box-shadow': '0 1px 5px #999'
            });
            $('.col_main').css('padding-top', "48px");
            $('.col_main>.ulBox div').css({ 'display': 'block' });
        } else {
            $('.col_main>.ulBox').css({
                'position': 'static',
                'box-shadow': '0 0 0'
            });
            $('.col_main').css('padding-top', "0");
            $('.col_main>.ulBox div').css({ 'display': 'none' });
        }
    })
}
// 选择数量
function number(num) {
    let input = $('.tb_key input');
    let changed = $('.tb_key em em');
    input.on('input', function() {
        if (this.value == '') {
            console.log(0);
        } else if (!Number(this.value)) {
            console.log(1);
            this.value = '1'
        } else if (parseInt(this.value) >= num) {
            this.value = num
        }
    });
    input.on('change', function() {
        if (this.value == '') {
            this.value = 1;
        }
    })
    changed.on('click', function() {
        let index = changed.index(this);
        if (index == 0) {
            input[0].value = parseInt(input[0].value) + 1;
        } else {
            if (input[0].value > 1) {
                input[0].value -= 1;
            }
        }
    })
}
//选择城市
function city() {
    // console.log($('.tb_meta strong'));
    $('.tb_meta strong').on('click', function() {
        // 点击位置显示
        $('.tb_meta .address').css('display', 'block');
        // 点击叉号消息
        $('.tb_meta .address .closebox').on('click', function() {
            $('.tb_meta .address').css('display', 'none');
        });
        // 选择城市
        console.log($('.tb_meta .addressNow span'));
        $('.tb_meta .addressNow span').on('click', function() {
            let arr = [];
            let string = '';
            $(this).text().split('').forEach(ele => {

            })
            $('.tb_meta .address').css('display', 'none');
        })
    });
}